@mixin buttonColor($name:'primary', $color:null) {
  @if $color != null {
    background-color: $color;
  } @else if map-has-key($buttonColor, $name) {
    background-color: map-get($buttonColor, $name);
  }
}


// 响应式设置  
@mixin screen-and-min($breakpoint) {  
    @if map-has-key($breakpoints, $breakpoint) {  
      @media (min-width: map-get($breakpoints, $breakpoint)) {  
        @content;  
      }  
    } @else {  
      @warn "No value found for breakpoint: #{$breakpoint}.";  
    }
}
@mixin screen-and-max($breakpoint) {  
    @if map-has-key($breakpoints, $breakpoint) {  
      @media (max-width: map-get($breakpoints, $breakpoint)) {  
        @content;  
      }  
    } @else {  
      @warn "No value found for breakpoint: #{$breakpoint}.";  
    }
}

@mixin min-and-max($min, $max) {  
    @media (min-width: $min) and (max-width: $max) {  
        @content;  
    }
}

@mixin scrollBar($width: 4px,$height: 4px,$color: rgb(226 232 240),$track:transparent){
  /* 自定义滚动条样式 */  
  &::-webkit-scrollbar {  
      width: $width; /* 滚动条宽度 */  
      height: $height; /* 滚动条高度（水平滚动条）*/  
  }  

  &::-webkit-scrollbar-thumb {  
      background: $color; /* 滚动条滑块颜色 */  
      border-radius: 2px; /* 滚动条滑块圆角 */  
  }  

  &::-webkit-scrollbar-track {  
      background: $track; /* 滚动条轨道颜色 */  
      border-radius: 2px; /* 滚动条轨道圆角 */  
  }
}